<template>
  <div class="container">
    <el-card class="box-card" header="试题录入">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="学科：" class="new-item" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            @change="subjectChange"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" class="new-item" prop="catalogID">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" class="new-item" prop="enterpriseID">
          <el-select v-model="form.enterpriseID" placeholder="请选择">
            <el-option
              v-for="item in companys"
              :key="item.id"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" class="new-item2" required>
          <el-row type="flex">
            <el-form-item
              prop="province"
              :rules="{
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }"
            >
              <el-select
                v-model="form.province"
                placeholder="请选择"
                @change="form.city = ''"
              >
                <el-option
                  v-for="(item, i) in provinces()"
                  :key="i"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="city"
              :rules="{
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }"
            >
              <el-select v-model="form.city" placeholder="请选择">
                <el-option
                  v-for="(item, i) in citys(form.province)"
                  :key="i"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form-item>
        <el-form-item label="方向：" class="new-item" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
              v-for="(item, i) in direction"
              :key="i"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-radio-group v-model="form.questionType">
            <el-radio label="1" @change="clearOptions">单选</el-radio>
            <el-radio label="2" @change="clearOptions">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简答</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干：" class="new-item" prop="question">
          <quill-editor
            v-model="form.question"
            :options="editorOption"
            @blur="$refs.form.validateField('question')"
          />
        </el-form-item>
        <el-form-item
          label="选项："
          class="xuanXiang"
          v-if="form.questionType != 3"
        >
          <div v-if="form.questionType == 1">
            <el-form-item v-for="options in form.options" :key="options.key">
              <el-row type="flex" justify="start" align="middle">
                <el-radio
                  v-model="options.isRight"
                  :label="1"
                  @change="clearIsRight(options.code)"
                  >{{ options.code }}：</el-radio
                >
                <el-input v-model="options.title"></el-input>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                >
                  上传图片
                  <i class="el-icon-circle-close"></i>
                </el-upload>
              </el-row>
            </el-form-item>
          </div>
          <div v-if="form.questionType == 2">
            <el-form-item v-for="options in form.options" :key="options.key">
              <el-row type="flex" justify="start" align="middle">
                <el-checkbox
                  v-model="options.isRight"
                  :true-label="1"
                  :false-label="0"
                  >{{ options.code }}：</el-checkbox
                >
                <el-input v-model="options.title"></el-input>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                >
                  上传图片
                  <i class="el-icon-circle-close"></i>
                </el-upload>
              </el-row>
            </el-form-item>
          </div>
          <el-button
            type="danger"
            :disabled="form.questionType == 1"
            size="small"
            @click="addDomain"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <el-form-item label="解析视频：" class="new-item">
          <el-input v-model="form.videoURL"></el-input>
        </el-form-item>
        <el-form-item
          label="答案解析："
          class="new-item"
          prop="answer"
          :rules="{ required: true, message: '请选择题干' }"
        >
          <quill-editor
            v-model="form.answer"
            :options="editorOption"
            @blur="$refs.form.validateField('answer')"
          />
        </el-form-item>
        <el-form-item label="题目备注：" class="new-item">
          <el-input type="textarea" v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item label="试题标签：" class="new-item">
          <el-select v-model="form.tags" placeholder="请选择试题标签">
            <el-option
              v-for="item in taps"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { direction } from '@/api/hmmm/constants.js'
import { simple as getTaps } from '@/api/hmmm/tags.js'
import { simple as getList } from '@/api/hmmm/directorys.js'
import { detail, add, update } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        city: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, trigger: 'blur' }],
        difficulty: [{ required: true, trigger: 'blur' }],
        question: [{ required: true, message: '请选择题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请选择题干', trigger: 'blur' }]
      },
      direction,
      provinces,
      citys,
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        options: [
          { isRight: 0, code: 'A', title: '', img: '' },
          { isRight: 0, code: 'B', title: '', img: '' },
          { isRight: 0, code: 'C', title: '', img: '' },
          { isRight: 0, code: 'D', title: '', img: '' }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，链接
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] // 代码块，图片
          ]
        },
        theme: 'snow'
      },
      subjectList: [],
      taps: [],
      list: [],
      companys: []
    }
  },
  async created () {
    await this.getSimple()
    await this.haveIdInit()
    await this.haveFollowUp()
    await this.getList()
  },
  methods: {
    clearIsRight (code) {
      this.form.options.forEach((item) => {
        if (item.code !== code) {
          item.isRight = 0
        }
      })
    },
    clearOptions () {
      this.form.options = this.form.options.map((item) => {
        return { ...item, isRight: 0 }
      })
    },
    async haveFollowUp () {
      if (this.form.subjectID) {
        const { data } = await getList({ subjectID: this.form.subjectID })
        this.list = data
        const res = await getTaps({ subjectID: this.form.subjectID })
        this.taps = res.data
      }
    },
    addDomain () {
      this.form.options.push({
        isRight: 0,
        code: String.fromCharCode(this.form.options.length + 65),
        title: '',
        img: ''
      })
    },
    async haveIdInit () {
      if (this.$route.query?.id) {
        const { data } = await detail({ id: this.$route.query.id })
        console.log(data)
        this.form = data
      }
    },
    async subjectChange () {
      this.form.catalogID = ''
      this.form.tags = ''
      const { data } = await getList({ subjectID: this.form.subjectID })
      this.list = data
      const res = await getTaps({ subjectID: this.form.subjectID })
      this.taps = res.data
    },
    async onSubmit () {
      await this.$refs.form.validate()
      if (this.$route.query?.id) {
        await update({ ...this.form, id: +this.$route.query.id })
      } else {
        await add(this.form)
      }
      this.$message.success('添加成功')
      this.$router.push('/questions/list')
    },
    async getSimple () {
      const { data } = await simple()
      this.subjectList = data
    },
    async getList () {
      const { data } = await list()
      this.companys = data.items
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
  .new-item {
    ::v-deep .el-input__inner {
      width: 400px;
    }
    ::v-deep .el-input--medium {
      width: 400px;
      .el-textarea__inner {
        height: 96px;
      }
    }
    ::v-deep .ql-container {
      height: 200px;
    }
  }
  .xuanXiang {
    ::v-deep .el-row {
      height: 80px;
    }
    ::v-deep .el-radio {
      margin-right: 0;
    }
    ::v-deep .el-input__inner,
    ::v-deep .el-input {
      width: 240px;
      margin-right: 4px;
    }
  }
  .new-item2 {
    ::v-deep .el-input__inner {
      width: 198px;
      margin-right: 4px;
    }
  }
  //图片框
  ::v-deep .avatar-uploader .el-upload {
    width: 100px;
    height: 60px;
    line-height: 60px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  ::v-deep .el-icon-circle-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    font-size: 18px;
    color: #999;
  }
}
</style>
